Skip to content

refactor(wells, contacts): move list pages onto shadcn DataTable - #347

Draft
jirhiker wants to merge 2 commits into
BDMS-1133from
refactor/wells-contacts-shadcn-table
Draft

refactor(wells, contacts): move list pages onto shadcn DataTable#347
jirhiker wants to merge 2 commits into
BDMS-1133from
refactor/wells-contacts-shadcn-table

Conversation

@jirhiker

Copy link
Copy Markdown
Member

Stacked on #344 — targets BDMS-1133, so the diff here is only the Wells/Contacts refactor.

Replaces the MUI DataGrid on the Wells and Contacts lists with a shared shadcn table built on TanStack Table, following the denser table style #344 introduced for Projects.

What's here

New src/components/DataTable (TanStack Table v8 over shadcn ui/table)

  • DataTable — rows, loading skeletons, empty state, row href with modifier-click new-window, selected-row state
  • DataTableColumnHeader — tri-state sort plus a filter popover: text, single-select, and numeric/date comparisons (= > <)
  • DataTableViewOptions — column visibility menu (replaces the DataGrid "Columns" button)
  • DataTableToolbar — search input, dismissible filter chips, record count
  • DataTablePagination — page size select and pager
  • useRefineDataTable — bridges Refine's useTable server state (paging, sorting, filtering) to TanStack's manual mode, hides permanent filters from the chips, and keeps the PostHog event names the DataGrid pages emitted (<prefix>_sorted, _filter_applied, _column_visibility_changed)

Pages

  • Wells — same columns, header tooltips, project filter chip, server search, Batch Field Sheets and CSV export. Now defaults to newest first.
  • Contacts — rows select instead of navigating, so the email, phone and address cards open below the table; the name cell links through to the contact page.

Supporting

  • ui/popover.tsx added from the shadcn registry
  • ListPageShell holds the breadcrumb/title/header-button chrome the DataTable pages share
  • Row navigation helpers moved next to the DataTable and re-exported from ListPage
  • New dependency: @tanstack/react-table@^8.21.3

Notes for review

  • Default sort is created_at desc. The ask was "last updated first", but ThingResponse exposes no update timestamp — created_at is the closest field. Easy to switch if the API accepts sort=updated_at.
  • Density toggle is not carried over — the shadcn table is already compact.
  • Sorting or changing a filter resets to page 1 (the DataGrid kept the page).
  • useListPageDataGridAnalytics is now unused. Left in place rather than editing src/hooks/index.ts, which has unrelated in-flight work; worth deleting in a follow-up.

Verification

Against the dev API: wells list loads newest-first (GET /thing/water-well?...&sort=created_at&order=desc), a name filter narrows to 2 records and shows a dismissible chip, contacts paginate server-side through 2,273 records, header clicks issue sorted requests, and the contact detail cards populate on row select. No console errors.

tsc and biome check are clean. 14 new tests cover the DataTable renderer and the Refine/TanStack bridge; the pre-existing contract-test failures need the prism mock server on :4010.

🤖 Generated with Claude Code

@github-actions

Copy link
Copy Markdown

Preview Deployment

Preview URL: https://preview-refactor-wells-contacts-shadcn-table-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

@jirhiker jirhiker changed the title refactor(wells, contacts): move list pages onto shadcn DataTable WIP: refactor(wells, contacts): move list pages onto shadcn DataTable Aug 17, 2026
@jirhiker jirhiker changed the title WIP: refactor(wells, contacts): move list pages onto shadcn DataTable refactor(wells, contacts): move list pages onto shadcn DataTable Aug 17, 2026
@jirhiker
jirhiker marked this pull request as draft August 17, 2026 20:54
@github-actions

Copy link
Copy Markdown

Preview Deployment

Preview URL: https://preview-refactor-wells-contacts-shadcn-table-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

jirhiker and others added 2 commits August 17, 2026 14:02
Replaces the MUI DataGrid on the Wells and Contacts lists with a shared
shadcn table built on TanStack Table, following the denser table style
introduced by the Projects work in #344.

- Adds src/components/DataTable: table renderer, sortable/filterable
  column headers, column visibility menu, filter chips, pager, and a
  useRefineDataTable hook bridging Refine's useTable server state
  (paging, sorting, filtering) to TanStack's manual mode.
- Column filters cover text, single-select, and numeric/date comparison
  operators; PostHog events keep the names the DataGrid pages emitted
  (<prefix>_sorted, _filter_applied, _column_visibility_changed).
- Wells: same columns, tooltips, project filter chip, server search,
  batch field sheets and CSV export; now defaults to newest first
  (created_at desc, the closest field the API exposes to "last updated").
- Contacts: rows now select instead of navigating, so the email, phone
  and address cards open below the table; the name cell links to the
  contact page.
- Adds ListPageShell for the page chrome the DataTable pages share, and
  moves the row navigation helpers next to the DataTable (re-exported
  from ListPage).

Density toggle is not carried over; the shadcn table is already compact.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The wells and contacts assertions still looked for the DataGrid's explicit
role attributes; the shadcn table renders th/tr, same as the projects list
already asserted.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@jirhiker
jirhiker force-pushed the refactor/wells-contacts-shadcn-table branch from 26070fc to 7877e0b Compare August 17, 2026 21:04
@github-actions

Copy link
Copy Markdown

Preview Deployment

Preview URL: https://preview-refactor-wells-contacts-shadcn-table-auejgdbofq-uc.a.run.app

Note: This preview uses the staging API endpoints.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant